<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        font-family: Verdana, "宋体";
        font-size: 12px;
    }

    #father {
        width: 960px;
        border: 1px hidden;
        margin: 0px auto;
    }

    #san {
    position: relative;
    top: -30px;
    left: 684px;
    }

    #san a {
        font-size: 15px;
        background-color: #EAFFFA;
        border: 3px #EAFFFA solid;
        text-decoration: none;
    }

    .o {
        position: relative;
        top: -15px;
        left: 55px;
    }

    #shou {
        color: #FFF;
        position: relative;
        top: -10px;
        height: 30px;
        width: 960px;
        font-size: 14px;
        text-align: center;
        border: 1px #FE6915 solid;
        background: #FE6915;
    }

    #w {
        width: 959px;
        height: 380px;
        margin: 20px auto;
        border: 1px #CCE9AC solid;
        position: relative;
    }

    #q {
        position: relative;
        top: 15px;
        left: -10px;
    }

    #y {
        z-index: 1;
        position: relative;
        top: 30px;
        left: 20px;
    }

    #r {
        width: 480px;
    }

    #r img {
        z-index: 0;
        position: relative;
        top: -20px;
        float: left;
    }

    h1 {
        color: #1A66B3;
        font-size: 12px;
    }

    p span {
        color: #8E112B;
        font-weight: bold;
    }

    .z {
        position: absolute;
        z-index: 1;
        left: 500px;
        top: 70px;
    }

    .x {
        width: 430px;
        height: 300px;
        position: absolute;
        left: 500px;
        top: 85px;
    }

    .x img {
        width: 100px;
        height: 105px;
        float: left;
    }

    p b {
        font-weight: normal;
        color: #5EA593;
    }

    .v {
        z-index: 1;
        position: relative;
        bottom: 130px;
        left: 240px;
    }

    .m {
        width: 430px;
        height: 300px;
        position: absolute;
        left: 500px;
        top: 210px;
    }

    .m img {
        width: 100px;
        height: 105px;
        float: left;
    }
</style>

<body>
    <div id="father">
        <div id="dang"><img src="img/logo.jpg" /></div>
        <div id="san"><img class="o" src="img/icon_count.png" />
        <a href="#">尾品汇 当当优品 数字馆 都看阅器</a></div>
        <div id="shou">首页&nbsp;&nbsp;&nbsp;&nbsp;图书&nbsp;&nbsp;&nbsp;&nbsp;音像&nbsp;&nbsp;&nbsp;&nbsp;童装&nbsp;&nbsp;
            &nbsp;&nbsp;
            服装&nbsp;&nbsp; 鞋靴&nbsp;&nbsp; 运动 &nbsp;&nbsp;箱包 &nbsp;&nbsp;美妆&nbsp;&nbsp;
            珠宝 &nbsp;&nbsp;&nbsp;&nbsp;家居 &nbsp;&nbsp;&nbsp;&nbsp;食品 &nbsp;&nbsp;&nbsp;&nbsp;酒
            &nbsp;&nbsp;&nbsp;&nbsp;手机&nbsp;&nbsp;&nbsp;&nbsp;
            数码 &nbsp;&nbsp;&nbsp;&nbsp;电脑 &nbsp;&nbsp;&nbsp;&nbsp;家电</div>
        <div id="wang"><img src="img/banner.png" /> </div>
    </div>
    <div id="w">
        <div id="q"><img src="img/bg_bang.gif" /> </div>
        <div id="y"><img src="img/bookNo1.gif" /></div>
        <div id="r"><img src="img/book-01.jpg" />
            <h1>偷影子的人 </h1>
            <p>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</p>
            <p>出版社：湖南文艺出版社</p>
            <p>当当价：<span>￥ 17.90</span></p>
            <p>
                不知道姓氏的克蕾儿。这就是你在我生命里的角色，
                我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。
                一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能“偷别人的影子”
                ，因而能看见他
            </p>
        </div>

        <div class="z"><img src="img/bookNo2.gif" /></div>
        <div class="x"><img src="img/book-02.jpg" />
            <h1> 看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </h1>
            <p>作 者：柴静 著</p>
            <p>出版社：广西师范大学出版社</p>
            <p><span>￥ 29.40</span> <b>7.4折</b></p>
        </div>
        <div class="v"><img src="img/bookNo3.gif" /></div>
        <div class="m"><img src="img/book-03.jpg" />
            <h1>改变孩子先改变自己 </h1>
            <p>作 者：贾容韬 贾毅 著</p>
            <p>出版社：作家出版社</p>
            <p><span>￥ 22.20</span> <b> 7.4折</b></p>
        </div>
    </div>
    <div id="footer" style="text-align:center;font-size:11px;color:#bbb;">
            <p>
                <span style="position:relative;top:-20px;">Copyright(C)当当网 2004-2017，All Rights Reserved</span>
                <img src="img/validate.gif"/>
                <span style="position:relative;top:-20px;">京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span> 
            </p>
        </div>
</body>
</html>